@mixin fz-m($fontSize: 16px) {
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-size: $fontSize;
    font-weight: 500;
}

@mixin fz-r($fontSize: 14px) {
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-size: $fontSize;
    font-weight: 400;
}

:deep {
    .el-form-item {
        margin-bottom: 24px;

        .el-form-item {
            margin-bottom: 0;
        }
    }

    .el-form-item + .form-title {
        padding-top: 8px;
    }

    .el-input {
        width: 420px;
        max-width: 420px;
    }

    .el-form-item__error {
        transform: translateY(3px);
    }

    .el-input-number {
        width: 80px;
        text-align: left;

        .el-input-number__increase,
        .el-input-number__decrease {
            width: 28px;
            border: 0 none;
            background-color: transparent;
        }

        .el-input__wrapper {
            padding-left: 8px;
        }

        .el-input__inner {
            text-align: left;
        }

        &.is-without-controls {
            .el-input__wrapper {
                padding-left: 12px;
            }
        }
    }

    // 模块小标题
    .form-title {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        color: #333;

        @include fz-m;

        &::before {
            width: 3px;
            height: 16px;
            margin-right: 6px;
            content: '';
            border-radius: 2px;
            background-color: #ff6b00;
        }
    }

    // 表单中右侧的提示
    .form-tip {
        flex: 1;
        margin-left: 6px;
        color: #999;
        line-height: 18px;

        @include fz-r;
    }

    // 覆盖el-radio标签。主要是影响助力者员工分配
    .el-radio {
        align-items: flex-start;
    }

    .el-radio__input {
        align-self: center;
    }

    // el单选标题
    .el-radio__label {
        display: flex;
        align-items: flex-start;
        white-space: normal;

        .form-tip {
            padding-top: 7px;
        }
    }

    // el-radio的formitem边距
    .form-radio-item,
    .form-switch-item {
        margin-top: -8px;
        margin-bottom: 12px;
    }

    .form-switch-item-center {
        margin-top: -4px;
        margin-bottom: 18px;
    }

    // 高级设置自动打标签tabs
    .auto-tag-list {
        margin-top: 10px;
        margin-bottom: 20px;

        .el-tabs__header {
            margin: 0;
        }

        .el-tabs__content {
            box-sizing: border-box;
            width: 100%;
            padding: 16px;
            padding-bottom: 24px;
            border: 1px solid #eaeaea;
            border-top: 0;
        }
    }

    // 带提示文本的单选组
    .wrap-radio-group {
        display: flex;
        align-items: flex-start;
        flex-direction: column;

        > .el-radio {
            height: auto;

            .el-radio__input {
                align-self: flex-start;
                padding-top: 10px;
            }
        }
    }

    .reward-list,
    .groupchat-list {
        border: 0 none;

        .cell {
            padding: 0 16px;
        }

        .el-button.is-link {
            min-width: auto !important;
            margin: 0 16px 0 0 !important;
            padding: 0 !important;

            &:focus {
                color: #ff6b00;
                outline: none;
            }
        }

        .el-table__inner-wrapper .el-table__header-wrapper .el-table__header thead tr th {
            padding: 14px 0;
            background-color: #f9f9f9;
        }
    }

    .groupchat-list {
        margin-top: -2px;
    }

    .reward-image {
        width: 28px;
        height: 28px;
    }

    // 有禁用的tootip按钮的外包装div
    .button-tooltip-trigger {
        display: inline-block;
        margin-top: 15px;
        vertical-align: middle;
    }

    .select-single-button {
        margin-top: 0;
    }

    // 无限拉群群信息
    .single-group-info {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 12px;
        padding: 8px;
        border-radius: 8px;
        background-color: #f9f9f9;

        .el-image {
            width: 56px;
            height: 56px;
            margin-right: 6px;
            border-radius: 6px;
        }

        > div {
            width: 160px;
        }

        .el-icon {
            margin-left: 20px;
            cursor: pointer;
        }
    }

    .groupchat-tip {
        display: flex;
        margin-top: 16px;

        > div:first-child {
            flex: 0 0 100px;
        }
    }

    .poster-switch {
        margin-right: 26px;
    }

    // 海报开关里的表单项
    .poster-form-item {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        vertical-align: middle;
        color: #333;

        @include fz-r;

        > span {
            margin-right: 9px;
        }

        > div {
            margin-right: 24px;
        }

        .el-select {
            width: 90px;

            .el-input {
                width: 100%;
                min-width: none;
            }
        }

        // 颜色选择器
        .el-color-picker__trigger {
            padding: 0;
            border-radius: 4px;
        }

        .el-color-picker__color {
            border: 0 none;
        }

        .el-color-picker__color-inner {
            border-radius: 3px;
        }
    }

    .poster-desc-item {
        flex: 0 0 100%;
        margin-top: 16px;
    }

    .form-tinymce-editor {
        margin-top: 8px;
    }

    .nickname-switch {
        margin: 18px 0 32px;
    }

    .cycle-type {
        width: 170px;

        .el-input {
            width: 100%;
            min-width: auto;
        }
    }

    .form-switch-tip {
        display: flex;
        margin-bottom: 8px;

        > .el-switch {
            margin-right: 6px;
        }

        .form-tip {
            padding-top: 6px;
        }
    }

    .area-list {
        margin-bottom: 8px;
    }

    .brush-set,
    .reminder-set {
        margin-top: 6px;
    }

    .helper-staff-divide {
        margin-bottom: 46px;
    }

    .select-tags {
        margin-top: 24px;
    }

    .assist-num-item {
        margin-top: 24px;
    }

    .tags-rule-item.tags-rule-item {
        margin-bottom: -10px;
    }

    .form-item-label {
        display: flex;
        align-items: center;

        > .el-icon {
            margin-left: 4px;
        }
    }

    .table-tip {
        margin-top: -16px;
        margin-bottom: 16px;
        padding: 6px 12px;
        color: #666;
        background-color: #fffaf9;
        line-height: 16px;

        @include fz-r(12px);
    }

    .welcome-tip {
        margin-top: 0;
    }

    .preview-example {
        margin-left: 8px;
        cursor: pointer;
        color: #ff6b00;

        @include fz-r(14px);
    }

    .materialContent .material-content-com .upload_btn {
        vertical-align: bottom;
    }

    // 解决素材库输入框被覆盖的问题
    .pane-box .el-input {
        width: 100%;
        max-width: auto;
    }

    .el-form-item.activity-time {
        margin-bottom: 24px;
    }

    .form-select {
        .el-popper {
            width: 100%;
            max-width: none;
        }

        .el-select-dropdown__item.hover {
            background-color: #fff0e6;
        }
    }

    .inputContent .input-content-config .config-left .input-content-item:nth-child(3) {
        border-right: none;
    }

    .edit-activity-time {
        display: flex;
        width: 420px;

        .el-input__wrapper {
            border: 1px solid var(--el-input-border-color);
            border-radius: 0;
            box-shadow: none;
        }

        .el-date-editor:first-child {
            .el-input__wrapper {
                border-right: 0;
                border-radius: var(--el-input-border-radius) 0 0 var(--el-input-border-radius);
            }

            &::after {
                position: absolute;
                z-index: 2;
                right: 0;
                content: '-';
                transform: translateX(50%);
                color: #ccc;
            }
        }

        .el-date-editor:last-child {
            .el-input__wrapper {
                border-left: 0;
                border-radius: 0 var(--el-input-border-radius) var(--el-input-border-radius) 0;
            }
        }

        .el-input__prefix {
            margin-right: 6px;
        }
    }

    .prize-dialog {
        .el-dialog__body {
            padding: 24px;
            padding-right: 0;
        }
    }

    .form-poster-desc {
        margin-bottom: 24px;
    }

    .example-dialog {
        .el-dialog__close {
            font-size: 16px;
        }

        .el-dialog__header {
            border-bottom: 0;
            padding-left: 28px;
            padding-right: 28px;
            height: 57px;
            box-sizing: border-box;
        }

        .el-dialog__body {
            text-align: center;
            padding: 0 28px 24px;
        }
    }

    .example-image {
        width: 264px;
        height: 572px;
    }

    .auto-tag-list {
        .el-tabs__content {
            overflow: visible;
        }
    }
}

:global(.messbox-confrim .el-icon) {
    top: 0;
    transform: translateY(0);

    --el-messagebox-color: #faad14;
}

:global(.messbox-confrim .el-message-box__header) {
    @include fz-m;

    line-height: 16px;
    color: #33302d;
}

:global(.messbox-confrim .el-message-box__message) {
    @include fz-r;

    color: #33302d;
    line-height: 20;
}
